package samples.examples.bezier_movement.application ;

import divtastic.js.DisplayDiv ;
import divtastic.js.Drawing;
import divtastic.js.application.views.WindowView ;

import js.Dom ;
import feffects.Tween;
import divtastic.Movement;

using divtastic.js.Drawing;
class Controller
{
    
    
    private var _holder:                DisplayDiv;
    private var circleRed:              DisplayDiv;
    private var circleGreen:            DisplayDiv;
    private var circleBlue:             DisplayDiv;
    private var circleYellow:           DisplayDiv;
    private static inline var red:      Int         = 0xff0000;
    private static inline var green:    Int         = 0x00ff00;
    private static inline var blue:     Int         = 0x0000ff;
    private static inline var yellow:   Int         = 0xffff00;
    private static inline var diaX:     Int         = 18;
    private static inline var diaY:     Int         = 20;
    private static inline var velocity: Int         = 2500;
    
    public function new( holder_: DisplayDiv )
    {
        
        _holder                 = holder_ ;
        
        circleRed               = createCircle( 20, 200, red ) ;
        circleRed.setupDrag();
        _holder.addChild( circleRed ) ;
        
        circleGreen             = createCircle( 200, 30, green ) ;
        circleGreen.setupDrag();
        _holder.addChild( circleGreen ) ;
        
        circleBlue              = createCircle( 450, 350, blue );
        circleBlue.setupDrag();
        _holder.addChild( circleBlue ) ;
        
        circleYellow            = createCircle( 20, 200, yellow );
        circleYellow.visible    = false;
        _holder.addChild( circleYellow ) ;
        createRightArrow( _holder );
        
    }
    
    private function createCircle( x: Int, y: Int, col: Int ): DisplayDiv
    {
        
        var circle      = new DisplayDiv() ;
        circle.x        = x;
        circle.y        = y;
        var divs        = circle.drawGradElipse( 0, 0, diaX, diaY, col, col );
        return circle;
        
    }
    
    private function createRightArrow( aTab: DisplayDiv ): HtmlDom
    {
        
        var right       = new DisplayDiv();
        right.x         = 5;
        right.y         = 0;
        aTab.addChild( right );
        var grey6       = 0x666666;
        var grey36      = 0x363636;
        right.drawGradTriangle( 4, 4, 24, 30, grey36, grey6, West, 1, Horizontal );
        right.getStyle().cursor = 'pointer';
        right.press.add( move ) ;
        return right.getInstance() ;
        
    }
    
    public function move()
    {
        
        circleYellow.x = circleRed.x;
        circleYellow.y = circleRed.y;
        circleYellow.visible = true ;
        
        var t = new Tween( 0, 1, velocity );
        t.setTweenHandlers( function( e ){ 
                                                circleYellow.x = Movement.quadraticBezierThru( e
                                                                                    , circleRed.x
                                                                                    , circleGreen.x
                                                                                    , circleBlue.x
                                                                                    );
                                                circleYellow.y = Movement.quadraticBezierThru( e
                                                                                    , circleRed.y
                                                                                    , circleGreen.y
                                                                                    , circleBlue.y
                                                                                    );                                        
                                                }
                            , function( e ){
                                                circleYellow.visible = false ;
                                            }
                            );
        t.start();
        
    }
    
    
}




